<template>
  <div>
    <el-dialog
        append-to-body
        :visible.sync="dialogVisible"
        :width="width"
        :modal="false"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :show-close="false">
      <div slot="title" class="dialogHeader">
        <div class="title">
          <slot name="title">标题</slot>
        </div>
        <span class="el-icon-close" style="font-weight: bold;cursor:pointer" @click="closeD"></span>
      </div>
      <div  class="content">
        <div style="min-height:180px">
          <slot></slot>
        </div>
        <div class="foot" style="text-align: right">
          <slot name="foot"></slot>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props:{
    width:{
      default:"500px",
      type:String,
    },
    show:{
      type:Boolean,
      default: false
    }
  },
  watch:{
    show:{
      handler(newval){
        if(newval){
          this.addDrag()
        }
        this.dialogVisible=newval
      },
      immediate:true
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.addDrag()
    })
  },
  data(){
    return{
      dialogVisible:false,
      left:'',
      top:''
    }
  },
  methods:{
    addDrag(){
      const dialogHeaderEl = document.querySelector('.el-dialog__header')
      const dragDom = document.querySelector('.el-dialog')
      dialogHeaderEl.style.cursor = 'move'

      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

      dialogHeaderEl.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - dialogHeaderEl.offsetLeft
        const disY = e.clientY - dialogHeaderEl.offsetTop

        // 获取到的值带px 正则匹配替换
        let styL, styT

        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (sty.left.includes('%')) {
          styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
          styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
        } else {
          styL = +sty.left.replace(/px/g, '')
          styT = +sty.top.replace(/px/g, '')
        }

        document.onmousemove = function(e) {
          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX
          const t = e.clientY - disY

          // 移动当前元素
          dragDom.style.left = `${l + styL}px`
          dragDom.style.top = `${t + styT}px`
          this.left=dragDom.style.left
          this.top=dragDom.style.top
          // 将此时的位置传出去
          // binding.value({x:e.pageX,y:e.pageY})
        }

        document.onmouseup = function(e) {
          const l = e.clientX - disX
          const t = e.clientY - disY

          // 移动当前元素
          dragDom.style.left = `${l + styL}px`
          dragDom.style.top = `${t + styT}px`
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    },
    showD(){
      this.dialogVisible=true
      const dom = document.querySelector('.el-dialog')
      dom.style.display="block"
    },
    closeD(){
      this.$nextTick(()=>{
        const dom = document.querySelector('.el-dialog__wrapper')
        const dragDom = document.querySelector('.el-dialog')
        console.log(dragDom.style,dom.style)
        console.log(this.left,this.top)
        dragDom.style.display="none"

        dragDom.style.left = '300px'
        dragDom.style.top = "500px"

        this.left = ''
        this.top=''
        this.$parent.rr=false
        this.$emit('close')
      })
    },
  }
}
</script>
<style scoped>
:deep(.el-dialog__header){
  padding: 0;
  cursor:move;
  width: 100%;
  height: 30px;
  background:rgba(0,0,0,.6);
  color: #fff;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
}
:deep(.el-dialog__body){
  padding: 0;
}
.dialogHeader{
  cursor:move;
  width: 100%;
  height: 30px;
  background:rgba(0,0,0,.6);
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
}
:deep(.el-dialog){
  background: transparent;
}
.content{
  background: rgba(255,255,255,.5);
  min-height: 200px;
  padding: 10px;
  color: black;
}
</style>